<template>
	<div class="app">
		<h2>求和为: {{ sum }}</h2>
		<h2>名字为: {{ person.name }}</h2>
		<h2>年龄为: {{ person.age }}</h2>
		<button @click="changeSum">sum+1</button>
		<button @click="changeName">修改名字</button>
		<button @click="changeAge">修改年龄</button>
		<button @click="changePerson">修改人</button>
		<hr>
		<h2>汽车品牌: {{ car.brand }}, 颜色: {{ car.options.color }}</h2>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeCar">修改车</button>
	</div>
</template>

<!-- 浅层ref, 纸堆顶层数据的修改做响应. 相比ref效率更高 -->
<script setup lang="ts" name="App">
import { ref, reactive, shallowRef, shallowReactive } from 'vue'
// 改为shallowRef后, changeSum有效
let sum = shallowRef(0)
// 改为shallowRef后, changeName和changeAge无效,changePerson有效
let person = shallowRef({
	name: '张三',
	age: 18
})
// 改为shallowReactive后,changeBrand和changeCar有效,changeColor无效
let car = shallowReactive({
	brand: '宝马',
	options: {
		color: '黑色',
		gear: '自动'
	}
})

function changeSum() {
	sum.value++
}
// person.value是第一层, person.value.name是第二层, shallowRef只对第一层有效
function changeName() {
	person.value.name += '~'
}
function changeAge() {
	person.value.age++
}
function changePerson() {
	person.value = {
		name: '李四',
		age: 20
	}
}
function changeBrand() {
	car.brand = '奔驰'
}
function changeColor() {
	car.options.color = '白色'
}
function changeCar() {
	Object.assign(car, {
		brand: '长安',
		options: {
			color: '黄色',
			gear: '手动'
		}
	})
}
</script>

<style>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>